<script setup>
import { ref } from 'vue'
import {userUpdataPassword} from '../../api/user'
const password = ref({ old_pwd:'', new_pwd:'',re_pwd:''})
const rules={
    old_pwd:[
        {required:true,message:'请输入密码',trigger:'blur'},
        // \S为非空字符,正则校验
        {pattern:/^\S{6,15}$/,message:'密码必须是6-15位非空字符'}
    ],
    new_pwd:[
        {required:true,message:'请输入密码',trigger:'blur'},
        // \S为非空字符,正则校验
        {pattern:/^\S{6,15}$/,message:'密码必须是6-15位非空字符'}
    ],
    re_pwd:[
        {required:true,message:'请输入密码',trigger:'blur'},
        // \S为非空字符
        {pattern:/^\S{6,15}$/,message:'密码必须是6-15位非空字符'},
        {validator:(rule,value,callback)=>{
           //rule 当前校验规则相关信息
           //value 所校验的表单元素目前的表单值
           //callback 回调函数
           //callback（）校验成功，如果要失败callback(new Error(错误信息))必须要使用回调函数
           if (value !== password.value.new_pwd) {
             callback(new Error('两次输入的密码不一致'))
           }
           else {
            callback()//校验成功也需要回调
           }
        },trigger:'blur'}
    ]
}
const onSubmit = async ()=>{
   const res = await userUpdataPassword(password.value)
   console.log(res)
}
</script>
<template>
    <div>
        <page-container title="更换密码">
            <el-row>
      <el-col :span="12">
        <el-form
          :model="password"
          :rules="rules"
          ref="formRef"
          label-width="100px"
          size="large"
        >
          <el-form-item label="旧密码" prop="old_pwd">
            <el-input v-model="password.old_pwd"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="new_pwd">
            <el-input v-model="password.new_pwd"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="re_pwd">
            <el-input v-model="password.re_pwd"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交修改</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
        </page-container>
    </div>
</template>